<template>
  <div class="breadcrumb_outer">
    <div class="breadcrumb" :class="isCollection ? 'isCollection' : ''">
      <!-- 格式 遮罩层 -->
      <div class="down_bj" v-show="isShow" @click="handleIsShow"></div>
      <div class="breadcrumb_inner">
        <!-- 传入以逗号分隔的文件名 -->
        <div class="breadcrumb_box">
          <span class="breadcrumb_list" v-for="(item, index) in breadcrumb" :key="index">
            <span class="breadcrumb_icon">/</span>
            {{item}}
          </span>
        </div>

        <div class="breadcrumb_right" v-if="isExamine">
            <div class="breadcrumb_menuF">
              <div class="breadcrumb_title" @click="handleIsShow">
                <span>状态</span>
                <van-image
                  class="breadcrumb_menuImg"
                  width="8"
                  height="10"
                  fit="contain"
                  :src="require('assets/images/jt_bottom.png')"
                />
              </div>
              <!-- 下拉菜单 -->
              <div class="down_menu" v-show="isShow">
                <div
                  class="down_list"
                  @click="examineClick(item)"
                  v-for="(item, index) in examineList"
                  :key="index"
                >{{item}}</div>
              </div>
            </div>
          </div>
          <div class="breadcrumb_right" v-if="isKnowledgeTree">
            <div class="breadcrumb_menuF">
              <div class="breadcrumb_title" @click="handleIsShow">
                <span>格式</span>
                <van-image
                  class="breadcrumb_menuImg"
                  width="8"
                  height="10"
                  fit="contain"
                  :src="require('assets/images/jt_bottom.png')"
                />
              </div>
              <!-- 下拉菜单 -->
              <div class="down_menu" v-show="isShow">
                <div
                  class="down_list"
                  @click="handleMenuFilter(item)"
                  v-for="(item, index) in format"
                  :key="index"
                >{{item}}</div>
              </div>
            </div>
          </div>

      </div>
    </div>
    <div class="breadcrumb_placeholder" style="height: 26px;"></div>
  </div>
</template>

<script>
export default {
  name: "breadcrumb",
  props: {
    breadcrumb: {
      type: Array,
      default: [],
    },
    // 是否加载右侧状态
    // 是否为审核文档
    isExamine: {
      type: Boolean,
      default: false,
    },
    // 是否为知识库
    isKnowledgeTree: {
      type: Boolean,
      default: false,
    },
    // 传过来需要过滤的数据列表
    fatherListData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 是否为收藏夹页面， 用于改变定位TOP高度
    isCollection: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      // 右侧下拉菜单是否显示
      isShow: false,
      // 格式类型
    //   format: ["全部", "pptx", "doc", "ppt", "pdf", "xls", "txt"],
      // 保存传过来的值, 用于格式筛选
      listData: [],
      // 审核状态
      examineList: ["全部", "待审核", "审核通过", "拒绝"],
    };
  },
  created() {
    this.listData = this.fatherListData;
    // console.log(this.listData)
  },
  methods: {
    handleIsShow() {
      this.isShow = !this.isShow;
    },
    // 格式过滤事件
    handleMenuFilter(format) {
      if (format == "全部") {
        this.$emit("handleFormatClick", this.listData, true);
        // console.log(this.listData)
      } else {
        let arr = [];
        arr = this.listData.filter((item) => {
          return item.fileCategory == format;
        });
        this.$emit("handleFormatClick", arr, true);
      }
    },
    // 审核过滤事件
    examineClick(listItem) {
      if (listItem == "全部") {
        this.$emit("handleFormatClick", this.listData, true);
      } else if (listItem == "待审核") {
        let arr = [];
        arr = this.listData.filter((item) => {
          return item.cloudFileInfo.status == 1;
        });
        this.$emit("handleFormatClick", arr, true);
      } else if (listItem == "审核通过") {
        let arr = [];
        arr = this.listData.filter((item) => {
          return item.cloudFileInfo.status == 2;
        });
        this.$emit("handleFormatClick", arr, true);
      } else if (listItem == "拒绝") {
        let arr = [];
        arr = this.listData.filter((item) => {
          return item.cloudFileInfo.status == 3;
        });
        this.$emit("handleFormatClick", arr, true);
      }
    },
  },
  computed: {
    format(){
        let arr = ['全部']
        let list = this.listData
        list.forEach(item => {
            if(arr.findIndex(i => i == item.fileCategory) == -1){
                arr.push(item.fileCategory)

            }
        })
        return arr
    }
  },
  watch: {
    // fatherListData(newVal){
    //     this.listData = newVal
    // }
  },
};
</script>

<style lang="less" scoped>
.isCollection {
  top: 44px !important;
}
.breadcrumb {
  background-color: #f8f8f8;
  height: 26px;
  left: 26px;
  padding: 0 15px;
  // margin: 0 -15px;
  position: fixed;
  top: 98px;
  left: 0;
  right: 0;
  z-index: 100;
  .down_bj {
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
  }
  .breadcrumb_inner {
    height: 100%;
    position: relative;
    .breadcrumb_box {
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      white-space: nowrap;
      margin-right: 35px;
      overflow-y: scroll;
      .breadcrumb_list {
        font-size: 12px;
        color: #2a2b2d;
        .breadcrumb_icon {
          display: inline-block;
          margin: 0 5px 0 5px;
        }
        &:first-child .breadcrumb_icon {
          display: none;
        }
      }
    }
    .breadcrumb_right {
      font-size: 12px;
      color: #2a2b2d;
      position: absolute;
      top: 50%;
      right: 0;
      z-index: 9000;
      transform: translateY(-50%);
      .breadcrumb_menuF {
        position: relative;
        .breadcrumb_title {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .breadcrumb_menuImg {
            margin-left: 3px;
          }
        }
        .down_menu {
          position: absolute;
          top: calc(100% + 10px);
          right: -5px;
          z-index: 9000;
          background-color: #fff;
          border-radius: 4px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          padding: 0 10px;
          &::after {
            content: "";
            display: block;
            position: absolute;
            top: -10px;
            right: 20%;
            z-index: 9000;
            border: 5px solid #fff;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-color: transparent;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          }
          .down_list {
            font-size: 12px;
            color: #2a2b2d;
            border-bottom: 1px solid #f1f1f1;
            padding: 9px 14.5px;
            white-space: nowrap;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>